<template>
  <div>
    <a-modal v-model:open="show" title="请选择时间下载" @ok="handleOk">
      <a-range-picker v-model:value="times" show-time />
    </a-modal>
    <!-- 下载列表 -->
    <DownloadTips ref="downloadTipsRef" />
  </div>
</template>
<script setup>
  import { ref } from 'vue';
  import { dateFormat } from '/@/utils/date';
  import dayjs from 'dayjs';
  import { api as gbRecordApi } from '/@/api/wvp/gb_record.js';
  import DownloadTips from '/@/components/downloadTips/index.vue';

  const props = defineProps({
    playbackUrl: {
      default: '',
    },
  });

  const downloadTipsRef = ref();
  const show = ref(false);
  const format = 'YYYY-MM-DD HH:mm:ss';

  const initDate = () => {
    const startTime = dateFormat(new Date(+new Date() - 1 * 60 * 1000));
    const endTime = dateFormat();
    return [dayjs(startTime, format), dayjs(endTime, format)];
  };
  const times = ref(initDate());

  function open() {
    show.value = true;
  }
  function handleOk() {
    show.value = false;
    downloadVideo();
  }

  function downloadVideo() {
    const startTime = dateFormat(times.value[0]);
    const endTime = dateFormat(times.value[1]);
    gbRecordApi
      .downloadVideo({
        url: props.playbackUrl,
        startTime,
        endTime,
      })
      .then(({ data }) => {
        let streamInfo = data;
        downloadTipsRef.value.openDialog(props.playbackUrl, streamInfo);
      });
  }

  defineExpose({ open });
</script>

<style lang="less" scoped>
  .download-content {
  }
</style>
